<template>
  <view class="page-container" :style="{paddingTop: (navBarHeight + statusBarHeight)+'px'}">

    <!-- 导航栏主体（固定在状态栏下方） -->
    <uni-nav-bar
        class="custom-nav-bar"
        :height="(navBarHeight + statusBarHeight) + 'px'"
        background-color="#DEE082"
        :border="false"
    >
      <view class="white" :style="{lineHeight:navBarHeight+'px',paddingTop:statusBarHeight+'px',textAlign:'center',width:'100%',fontSize:'34rpx'}">{{title}}</view>
      <!-- 左侧返回按钮 -->
      <template #left>
        <view class="iconfont custom-back-icon white" v-if="showBack" :style="{height:navBarHeight+'px',marginTop:statusBarHeight+'px',lineHeight:navBarHeight+'px'}" @click="handleBack">
          &#xe60d;
        </view>
      </template>
    </uni-nav-bar>
    <!-- 页面内容（处理底部安全区域） -->
    <view class="content safe-area-inset-bottom">
      <!-- 页面主体内容 -->
      <slot></slot>
    </view>
  </view>
</template>

<script>
import UniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  name: 'f-view',
  mixins: [],
  components: {UniNavBar},
  props: {
    title:String,
  },
  data () {
    return {
      showBack: false,
      statusBarHeight: 20, // 默认状态栏高度
      navBarHeight: 44,    // 导航栏固定高度（不含状态栏）
      isFullScreen: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    const systemInfo = uni.getSystemInfoSync();
    const model = systemInfo.model;
    // 动态获取状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 判断全面屏（示例逻辑，可根据机型适配）
    this.isFullScreen = model.includes('iPhone X') ||
        parseInt(model.match(/iPhone (\d+)/)?.[1] || 0) >= 11;
    this.checkBackButton();
  },
  methods: {
    checkBackButton() {
      const pages = getCurrentPages();
      // 基础判断：页面栈长度 > 1 时显示返回按钮
      this.showBack = pages.length > 1;

      // 处理 H5 端直接进入子页面的情况（需返回首页）
      if (this.showBack === false && this.$isH5) {
        // 判断是否从其他页面跳转而来（如直接输入URL）
        if (document.referrer === '') {
          // 用户直接访问子页面，仍然显示返回按钮
          this.showBack = true;
        }
      }
    },
    handleBack() {
      if (this.showBack) {
        uni.navigateBack();
      } else {
        // 自定义返回逻辑（如跳转首页）
        uni.reLaunch({ url: '/pages/index/index' });
      }
    },
  }
}
</script>

<style scoped lang="scss">
.bg-color{
  background-color: var(--nav-bg-c);
}
.custom-back-icon{
  width: 80rpx;
  font-size: 40rpx;
  text-align: center;
}
/* 导航栏主体样式 */
.custom-nav-bar {
  position: fixed;
  top: 0; /* 紧贴状态栏下方 */
  width: 100%;
  z-index: 1000;
}

/* 底部安全区域 */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 返回按钮图标自适应 */
.back-button .icon {
  width: 24rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

</style>